@pc:1.8;
@andrw: 1.3;
@iphone5: 2.0;
@iphone6: 1.92;
@iphone6p: 2;
@s: @andrw;
* {
  margin: 0;
  padding: 0;
}
input:focus {
  outline: none;
  background: none;
}
a {
  text-decoration: none;
}
html {
  font-family: "Microsoft YaHei";
  font-size: 62.5%;
}
body {
  background-color: #FFF;
  font-size: 62.5%;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.clearfix:after {
  visibility: hidden;
  display: block;
  content: "";
  clear: both;
  height: 0;
}
.clearfix {
  display: block;
  *zoom: 1;
}
i,
em {
  font-style: normal;
}
li {
  list-style: none;
}
    body{     
        .nextNum {
            display: block;
            width: 200px;
            padding: 10px 30px;
            border: 1px solid #ccc;
            margin: 10px auto;
            text-align: center;
            color: #1A96D6;
            text-decoration: none;
        }
       .gameStart{
            position: relative;
            width: 100%;
            margin: 0 auto;
            text-align: center;
            .gameStart_top{
                width: 100%;
                background: url(../images/gameStart_top.png) no-repeat;
            }
            .gameStart_logo{
                position: absolute;
                width: 100%;
                text-align: center;
            }
            .gameStart_content{
                position: relative;
                left:50%;
                background: url(../images/gameStart_content.png) no-repeat;
                z-index: 10;
                p,em{
                    float:left;
                    font-family: 'Adobe 黑体 Std';
                    color: #444;
                    text-align: left;
                }
                a.startOpr{
                    position: absolute;
                    color: #1A96D6;
                    left:50%;
                    text-decoration: none;                    
                    background: url(../images/startOpr.png) no-repeat;
                }
            }
            .gameStart_footer{
                position: fixed;
                bottom: 0;
                width: 100%;
                background: url(../images/gameStart_footer.png);
                z-index: 9;
            }
        }
        .gameIng{
          position: relative;
          left:0;
          top:0;
          width: 100%;
          height: 100%;
          background: #2DBB4E url(../images/gameIng_footer.png) no-repeat bottom; 
          .gameIng_top{
              position: relative;  
              margin: 0 auto;
              .timeLine{
                  width: 100%;
                  position: relative;
                  background: #8FE5A3;
              }
              .timeBar {
                    position: absolute;
                    background-color: #25A042;
              }
              .gameIng_origin,
              .gameIng_gold,
              .gameIng_silver,
              .gameIng_bronze{
                  position: absolute;
              }
              .gameIng_bronze{
                  right: 0;
              }
          }
          .wordInit {
            text-align: center;
                .cnWord {
                    font-family: 'Adobe 黑体 Std';
                    color: #fff;
                }
                .enWord {
                    color: #fff726;
                    font-weight: bold;
                    font-family: 'Arial';
                    background: url(../images/enWord.png) no-repeat;
                    background-position:  bottom;
                    opacity: 0;
                }
          } 
        }
        .gameWap {
            position: relative;
            left:50%;
            li {
                list-style: none;
                cursor: pointer;
                display: block;
                position: relative;
                float: left;
                text-align: center;
                border-radius: 50%;
                background: #fff;
                font-family: 'Arial';
                color: #444;
                font-weight: bold;
            }
            li.wrong {
                background:#fff url(../images/wrong.png) no-repeat center bottom;
                background-size: 32px 32px;
            }
            li.right {
                background:#5DD87A;
            }
        }
        .gameOver{
            width: 100%;
            text-align: center;
            p{
                font-family: 'Adobe 黑体 Std';
                color: #444;
                .lastTime{
                    color: #f46e39;
                }
                font{
                    color: #50d146;
                    em{
                        color: #444;
                    }
                }
            }
            .gameOver_footer{
                position: fixed;
                bottom: 0;
                left:0;
                width: 100%;
                background: url(../images/gameOver_footer.png) no-repeat;
                  a.restart{
                        position: relative;
                        display: block;
                        width: 80%;
                        text-align: center;
                        color: #fff;
                        margin-left: 10%;
                        text-decoration: none;
                        font-family: 'Adobe 黑体 Std';
                        background: #49BD40;
                        z-index: 4;
                   }
                   em{
                       display: inline-block;
                       color: #fff;
                       font-family: 'Adobe 黑体 Std';
                   }
            } 
            a.gameOver_renovate{
                display: inline-block;
                border:#50D146 1px solid;
                text-align: center;
                color: #39b22f;
                font-family: 'Adobe 黑体 Std';
                cursor: pointer;
            }
            .gameOver_medal{
                position: relative;
                left:50%;
                background: url(../images/gameOver_medal.png) no-repeat;
                img{
                    position: absolute;
                    left:50%;
                }
            } 
        } 
    }
.less(@s){
 body{
     .gameOver{
         .gameOver_footer{
             height: round(301px/@s,1);
             background-size: 100% round(301px/@s,1);
           
             a.restart{
                 height: round(90px/@s,1);
                 line-height: round(90px/@s,1);
                 font-size:round(30px/@s,1);
                 border-radius: round(45px/@s,1);
             }
             em{
                 font-size: round(30px/@s,1);
                 margin-top: round(85px/@s,1);
                 margin-bottom: round(20px/@s,1);
             }
         }
         a.gameOver_renovate{
                 width: round(302px/@s,1);
                 height: round(82px/@s,1);
                 line-height: round(82px/@s,1);
                 font-size: round(36px/@s,1);
                 border-radius: round(40px/@s,1);
                 margin-top: round(40px/@s,1);
         }
         .gameOver_medal{
             width: round(606px/@s,1);
             height: round(450px/@s,1);
             margin-bottom: round(40px/@s,1);
             margin-left: round(-303px/@s,1);
             background-size: round(606px/@s,1) round(314px/@s,1);
             img{
                 width: round(250px/@s,1);
                 height: round(260px/@s,1);
                 top:round(190px/@s,1);
                 margin-left: round(-135px/@s,1);
             }
         }
        p{
             font-size: round(30px/@s,1);
             line-height: round(60px/@s,1);
             .lastTime,font{
                 font-size: round(48px/@s,1);
             }
             font{
                 em{
                     font-size: round(30px/@s,1);
                 }
             }
        }
     }
     .gameWap{
         width: round(540px/@s,1);
         margin-top: round(20px/@s,1);
         margin-left: round(-285px/@s,1);
         li{
             width: round(150px/@s,1);
             height: round(150px/@s,1);
             line-height: round(150px/@s,1);
             margin-bottom: round(30px/@s,1);
             margin-left: round(30px/@s,1);
             font-size: round(60px/@s,1);
             img{
                 width: round(60px/@s,1);
                 height: round(60px/@s,1);
                 margin-top: round(45px/@s,1);
             }
         }
         li.wrong {
              background-size: round(150px/@s,1) round(150px/@s,1);
         }
     }
     .gameIng{
         background-size: 100% round(333px/@s,1);
         .wordInit {
             .cnWord,.enWord{
                 font-size: round(60px/@s,1);
             }
             .cnWord{
                 margin-top: round(50px/@s,1);
             }
             .enWord{
                 height: round(60px/@s,1);
                 line-height: round(60px/@s,1);
                 padding-bottom: round(50px/@s,1);
                 background-size:round(316px/@s,1) round(88px/@s,1);
             }
         }
         .gameIng_top{
              width: round(504px/@s,1);
              padding-top: round(58px/@s,1);
             .timeLine,.timeBar{
                 height: round(20px/@s,1);
                 border-radius: round(10px/@s,1);
             }
             .gameIng_origin{
                 width: round(54px/@s,1);
                 height: round(80px/@s,1);
                 top:round(25px/@s,1);
                 left:round(-20px/@s,1);
             }
             .gameIng_gold,
             .gameIng_silver,
             .gameIng_bronze{
                 width: round(70px/@s,1);
                 height: round(80px/@s,1);
                 top:round(26px/@s,1);
             }
             .gameIng_gold{
                 left:round(115px/@s,1);
             }
             .gameIng_silver{
                 left:round(275px/@s,1);
             }
         }
     }
     .gameStart{
         .gameStart_top{
             height: round(373px/@s,1);
             background-size: 100% round(373px/@s,1);
         }
         .gameStart_logo{
             top:round(170px/@s,1);
             img{
                 width: round(262px/@s,1);
                 height: round(196px/@s,1);
             }
         }
         .gameStart_content{
             width: round(562px/@s,1);
             height: round(485px/@s,1);
             margin-left: round(-281px/@s,1);
             background-size:round(562px/@s,1) round(485px/@s,1);
             p,em{
                 font-size: round(30px/@s,1);
                 margin-left: round(40px/@s,1);
             }
             p{
                 margin-top: round(140px/@s,1);
             }
             em{
                 width: round(490px/@s,1);
                 line-height: round(42px/@s,1);
             }
             a.startOpr{
                 width: round(250px/@s,1);
                 height: round(260px/@s,1);
                 bottom: round(-120px/@s,1);
                 margin-left: round(-125px/@s,1);
                 background-size:round(250px/@s,1) round(260px/@s,1);
             }
         }
         .gameStart_footer{
             height:round(280px/@s,1);
             background-size:100% round(280px/@s,1);
         }
     }
 }
}
//竖屏
@media all and (orientation : portrait){ 
    body{
        .gameIng{
            position: fixed;
        }
    }
} 
@media screen and (max-width: 2560px) {
/* 兼容常规 */
  .less(@pc);
}
@media screen and (max-width: 542px){
/* 兼容安卓540 以下*/
  .less(@andrw);
     body{
      .gameStart{
          .gameStart_footer{
              position: relative;
              margin-top: round(50px/@s,1);
          }
      }
       .gameOver{
         .gameOver_footer{
             position: relative;
             margin-top: round(60px/@s,1);
            }
       }
   }
}
@media screen and (max-width: 480px){
/* 兼容安卓480 以下,除以360得到*/
  .less(1.8);
}
@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4 - 5 */
  .less(@iphone5);
      body{
      .gameStart{
          .gameStart_footer{
              position: fixed;  
          }
      }
       .gameOver{
         .gameOver_footer{
             position: relative;
             bottom: 0;  
            }
       }
   }
}
@media (device-height:667px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 */
  .less(@iphone6);
    body{
      .gameStart{
          .gameStart_footer{
              position: fixed;  
          }
      }
       .gameOver{
         .gameOver_footer{
             position: fixed;

            }
       }
   }
}
@media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 Plus */
  .less(@iphone6p);
     body{
      .gameStart{
          .gameStart_footer{
              position: fixed;  
          }
      }
       .gameOver{
         .gameOver_footer{
             position: fixed;

            }
       }
   }
}
@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4 - 5 */
  .less(@iphone5);
  body{
      .gameStart{
          .gameStart_footer{
              position: relative;
              margin-top: round(50px/@s,1);
          }
      }
     .gameOver{
         .gameOver_footer{
             position: relative;
             margin-top: round(50px/@s,1);
             a.restart{
                position: absolute;
                bottom: round(38px/@s,1);
             }
         }
     }
     .gameIng{
          position: relative;
          padding-bottom: round(100px/@s,1); 
     }
  }
}
//横屏
@media all and (orientation : landscape) {
    body{
        .gameIng{
            position: relative;
        }
        .gameOver{
            .gameOver_footer {
                position: relative;
            }
        }
    }
}